<template>
<!--:class="{warpFixed:showDialog}" -->
    <div class="recruiting-warp">

        <div class="recruitingTopBox">
            <img class="recruiting-word recruiting-word-am" src="http://img.uuuda.com/recruiting/xszm.png"/>
            <img class="recruiting-top" src="http://img.uuuda.com/recruiting/recruiting-top.png"/>

        </div>
        <!--进度条-->
        <div class="progressBox">
            <!--上半部分标尺-->
            <div class="progress-top-tips">
                <div class="progress-top-tip-cell">
                </div>
                <div class="progress-top-tip-cell">
                    <div class="tip-top-line"></div>
                    <p class="tip-word3">报名人数达到1000，每人可获得70元拼车礼包</p>

                </div>
                <div class="progress-top-tip-cell">

                </div>
                <div class="progress-top-tip-cell">

                </div>

            </div>
            <yd-progressbar type="line" :progress="progress" trail-width="6" trail-color="#ff4c6a" stroke-color="#607392"></yd-progressbar>
            <!--下半部分标尺-->

            <div class="progress-tips">
                <div class="progress-tip-cell">
                    <div class="tips-count">0</div>
                    <div class="tip-line"></div>

                    <p class="tip-word">报名人数达到500，每人可获得50元拼车礼包</p>
                </div>
                <div class="progress-tip-cell" >
                    <div class="tips-count">500</div>

                </div>
                <div class="progress-tip-cell">
                    <div class="tips-count">1000</div>

                </div>
                <div class="progress-tip-cell" style="border-right:1px solid #A4B8D9;">
                    <div class="tips-count">1500</div>

                    <div class="tip-line"></div>

                    <p class="tip-word2" >报名人数达到2000，每人可获得100元拼车礼包</p>
                    <div class="tips-count-end">2000</div>

                </div>


            </div>
        </div>
        <!--立即报名-->
        <div @click="signIn" v-if="!isSuccess ">
            <img class="signInBtn s-animated  " src="http://img.uuuda.com/recruiting/signIn.png"/>

        </div>
        <!--<div class="signInBtn" @click="signIn" v-if="!isSuccess">极速报名&nbsp;立享福利</div>-->
        <!--报名状态-->
        <div class="signInStatesBox" v-if="isSuccess">
            <img class="signInTitle" src="http://img.uuuda.com/recruiting/signIn_state.png" />
            <img class="zanLogo" src="http://img.uuuda.com/recruiting/zanLogo.png" />
            <p class="signInSuc" >您已报名成功</p>
            <!--乘客 1是乘客 2是车主-->
            <p class="signInDec" v-if="person==1&&registeredNumber<1000">当前总报名人数{{registeredNumber}}人，可获得50元拼车礼包</p>
            <p class="signInDec" v-if="person==1&&(registeredNumber>=1000 && registeredNumber<2000)">当前总报名人数{{registeredNumber}}人，可获得70元拼车礼包</p>
            <p class="signInDec" v-if="person==1&&registeredNumber>=2000">当前总报名人数{{registeredNumber}}人，可获得100元拼车礼包</p>

            <p class="signInDec" style="margin-top: 5px" v-if="person==1&&registeredNumber<1000">再报名{{(1000-registeredNumber)}}人，将获得70元拼车礼包</p>
            <p class="signInDec" style="margin-top: 5px" v-if="person==1&&(registeredNumber<2000 && registeredNumber>=1000 )">再报名{{(2000-registeredNumber)}}人，将获得100元拼车礼包</p>
            <img class="coupons" src="http://img.uuuda.com/recruiting/quan1.png" v-if="person==1&&registeredNumber<1000"/>
            <img class="coupons" src="http://img.uuuda.com/recruiting/quan2.png" v-if="person==1&&(registeredNumber>=1000 && registeredNumber<2000)"/>
            <img class="coupons" src="http://img.uuuda.com/recruiting/quan3.png" v-if="person==1&&registeredNumber>=2000"/>
            <!--车主-->
            <p class="signInDec" v-if="person==2">活动开始后每日发布2条有效行程可得5元</p>

        </div>
        <!--报名信息-->
        <div class="signInMsgBox"  v-if="isSuccess">
            <img class="signInTitle" src="http://img.uuuda.com/recruiting/signIn_msg.png" />

            <div class="signInMsgPhoneBox">
                <p class="signInMsgPhoneTitle">手机号码:</p>
                <p class="signInMsgPhoneName">{{showPhone}}</p>
            </div>
            <div class="signInMsgRegisterBox" v-if="hasRegistered">
                <p class="signInDec" style="margin-bottom: 5px">您的手机号码还未注册U搭拼车</p>
                <p class="signInDec">请在活动开始前注册，以免无法为您发放奖励</p>
                <div class="erBox">
                    <img src="http://img.uuuda.com/recruiting/ewm.png"/>
                </div>
            </div>

        </div>

        <!--活动细节底图-->
        <img class="recruiting-bottom" src="http://img.uuuda.com/recruiting/recruiting-bottom.png"/>


        <!--填写信息弹出-->
        <div class='info_dialog_container' v-if='showDialog'>
            <div class='wx-mask'></div>
            <div class='info_wx-dialog animated  zoomIn' >
                <div class="dialog-cell" style=" justify-content:center;margin-bottom: 0;padding-top: 0;">
                    <div class="person" :class="{personCur:personClick==1}" @click="personBtn(1)">我是乘客</div>
                    <div class="person" :class="{personCur:personClick==2}" @click="personBtn(2)">我是车主</div>


                </div>
                <div class="dialog-cell">
                    <img class="dialog-name" src="http://img.uuuda.com/recruiting/phone.png"/>
                    <div class="dialog-cell-border">
                        <input class="telphone" name='phone' type="tel" maxlength="11" v-model="phone" placeholder="输入您的手机号"/>
                    </div>
                </div>
                <div class="dialog-cell" >
                    <img class="dialog-name" src="http://img.uuuda.com/recruiting/code.png"/>
                    <div class="dialog-cell-border">

                        <input class="telphone" type="tel" v-model="code" placeholder="输入验证码" name='code'/>
                        <div v-if="canSend" class="code-btn" @click="getCode" >获取验证码</div>
                        <div class="code-btn code-btn-disable" v-else>{{codeText}}</div>
                    </div>

                </div>
                <div class="dialog-cell" style="margin-bottom: 0;padding-top: 0px">
                    <img class="dialog-name" style="margin-top: 5px" src="https://uuuda.oss-cn-beijing.aliyuncs.com/recruiting/area.png"/>
                    <p class="area-name">拼车路线，从密云到：</p>
                </div>
                <select class="areaselect" v-model="area" >
                    <option value="">请选择</option>
                    <option value="1">望京区域（望京西；芍药居；酒仙桥）</option>
                    <option value="2">中关村区域</option>
                    <option value="3">上地区域（西二旗；永丰；环保园；北清路）</option>
                    <option value="4">国贸区域（通州；东四环；亦庄；）</option>
                    <option value="5">其它区域</option>

                </select>


                <div class="conmit" @click="conmitBtn" v-if="canConmit">{{conmit_text}}</div>
                <div class="conmit conmit-disable"  v-else>提交</div>
            </div>
             <!--弹出关闭-->
            <img class="close" src="http://img.uuuda.com/welfare/close.png" @click="closeDialog"/>
        </div>
    </div>
</template>
<script>
let axios = require("axios");
export default {
    data() {
        return {
           phone:'',//手机号
           code:'',//验证码
            codeText: '获取验证码',
            person:1,//身份
            area:'',//地区
            canSend: false,//是否可以发送验证码
            sec: 59,//倒计时
            lastDay:false,//节目截止日
            canConmit:false,//提交按钮是否可点
            showDialog:false,//是否展示弹窗
            progress:0,//进度条
            registered:false,//是否参加过活动
            hasRegistered:false,//是否注册过
            registeredNumber:0,//报名总人数
            lockBtn:1,
            isSuccess:false,//是否提交成功
            showPhone:'',//页面展示的手机号
            personClick:1,
            number:0,
            conmit_text:'提交'


        };
    },
    filters:{
        cash:function(value){
            value +='';
            return value.replace(/(?!^)(?=(\d{3})+$)/g, ',')
        }
    },
    created() {
        let self=this;
    },
    mounted(){
        this.initPage();
    },

    watch:{
        phone(newptel,oldtel){
            let self=this;
            self.checkPhone(newptel);
            self.canSend= self.checkPhone(newptel)
            self.checkMessage();
        },
        code(newptel,oldtel){
            let self=this;
            self.code=newptel
            self.checkMessage();
        },

        area(newptel,oldtel){
            let self=this;
            self.area=newptel
            self.checkMessage();
        },

    },
    methods: {

        //初始化页面
        initPage(){
            let self = this;

            //1、当前时间戳
            let nowtime = Date.parse(new Date()) / 1000;
               if(nowtime>=1555675200){
                   self.lastDay=true
               }
            //请求城市区域接口
            axios({
                method: "post",
                url: "/api/activities-apply/index",
                params: {

                }
            }).then(function(res) {
                let data = res.data;
                console.log(data)
                if(data.status == 0){
                    self.number=data.number
                    self.progress=data.number/2000
                }
            });
        },
        personBtn:function(id){
            let self = this;
            self.personClick=id;
            self.person=id
        },
        //立即报名按钮
        signIn:function(){
            let self = this;
            if(self.lastDay){
                self.$dialog.toast({
                    mes: "已过报名截止日期",
                    timeout: 1500
                });
                return;
            }else if(self.number>=2000){
                self.$dialog.toast({
                    mes: "报名人数已达上限活动截止",
                    timeout: 1500
                });
                return;
            }
            self.showDialog=true;//是否展示弹窗
        },
        //关闭弹窗
        closeDialog(){
            let self=this;
            self.showDialog=false;
            self.init();
        },
        //检查必填项
        checkMessage(){
            let self = this;

            if(self.phone && self.code  && self.area && !self.registered){
                self.canConmit=true//提交按钮是否可点

            }else {
                self.canConmit=false//提交按钮是否可点
            }
        },
        //检查手机号验证
        checkPhone(str){
            // 定义手机号的正则
            var isMobile = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
            //拿到去除空格后的手机号
            // 校验手机号
            return isMobile.test(str);
        },
        //获取验证码
        getCode(){
            let self = this;
            if(self.phone){
                axios({
                    method: "get",
                    url: "/api/activities-apply/send-code",
                    params: {
                        phone:self.phone
                    }
                }).then(function(res) {
                    let data = res.data;


                    if(data.status == 0){
                        if(data.old==1){
                            self.hasRegistered=false;//注册
                        }else {
                            self.hasRegistered=true;//未注册
                        }
                        self.registeredNumber=data.number;
                        self.showPhone=self.phone;

                        self.sec=59;
                        self.showPhone=self.phone;

                        self.startInterval();
                    }else if(data.status == 2){
                        if(data.old==1){
                            self.hasRegistered=false;//注册
                        }else {
                            self.hasRegistered=true;//未注册
                        }
                        self.person=data.type;//注册类型
                        self.isSuccess=true;
                        self.showDialog=false;//是否展示弹窗
                        self.registered=true;//已注册
                        self.registeredNumber=data.number;
                        self.showPhone=self.phone;
                        self.init();
                        self.$dialog.toast({
                            mes: data.msg,
                            timeout: 1500
                        });
                    }else {
                        self.$dialog.toast({
                            mes: data.msg,
                            timeout: 1500
                        });
                        self.showDialog=false;//是否展示弹窗
                        self.init();

                    }
                });
            }

        },
        //倒计时
        startInterval(){
            let self = this;
            self.canSend=false,
            self.codeText= '60s后重新获取'
            let inHand = setInterval(function(){
                self.sec=self.sec-1,
                self.codeText=self.sec+'s后重新获取'
                if(self.sec < 0){
                    clearInterval(inHand);
                        self.canSend=true
                } else {
                    self.canSend=false
                }
            }, 1000);
        },
        init(){
            let self = this;
            self.conmit_text='提交';
            self.code='';
            self.type='';
            self.area='';

        },
        //信息提交按钮
        conmitBtn(){
            let self = this;
            self.conmit_text='提交中...'

            if(self.lockBtn<0)return;

            self.lockBtn=-1
            axios({
                method: "get",
                url: "/api/activities-apply/apply",
                params: {
                    code:self.code,
                    type:self.person,
                    area:self.area,
                }
            }).then(function(res) {
                self.lockBtn=1
                let rdata = res.data;

                if(rdata.status == 0){
                    self.progress=rdata.number/2000;
                    self.registeredNumber=rdata.number;
                    self.showPhone=self.phone;
                    self.isSuccess=true
                    self.showDialog=false,//是否展示弹窗
                        self.init();
                    self.$dialog.toast({
                        mes: rdata.msg,
                        timeout: 1500
                    });
                }else {
                    self.$dialog.toast({
                        mes: rdata.msg,
                        timeout: 1500
                    });
                    self.showDialog=false;//是否展示弹窗
                    self.init();
                }
            });
        },

    }
};
</script>

<style>
      body{
          width: 100%;
          overflow-x: hidden;

      }
      input,button, select, textarea{outline: none;border: none;background: none;}
      .recruiting-warp{
        position: relative;
          background:#243a60;
          width: 100%;
      }
      .warpFixed{
          position: fixed;
          top:0px;
          left: 0px;

      }
    .recruitingTopBox{
        position: relative;
        width: 100%;
        height: 334px;
        background: #FFE57C ;
    }

      .close{
          width: 40px;
          position: fixed;
          height: 40px;
          display: block;
          top: 88%;
          left: 50%;
          margin-left: -20px;
          z-index: 1000;
      }
    .recruiting-word{
        position: absolute;
        top: -60px;
        left: 50%;
        margin-left: -136px;
        width: 272px;
        height: 61px;
        opacity: 0;

        /*margin: 0 auto;*/
    }
    .signInStatesBox{
        padding: 16px;
        border-top:1px solid #162541;
        border-bottom:1px solid #162541;
    }
    .signInMsgBox{
        padding: 16px 0px 30px 16px;
        border-bottom:1px solid #162541;
    }
    .signInTitle{
        position: relative;
        width: 94px;
    }
    .zanLogo{
        position: relative;
        width: 59px;
        display: block;
        margin: 0 auto;
    }
    .signInSuc{
        position: relative;
        font-size: 18px;
        color: #FFD363;
        text-align: center;
        margin-bottom: 8px;
    }
    .signInDec{
        position: relative;
        font-size: 16px;
        color: #FFD363;
        text-align: center;

    }
    .coupons{
        position: relative;
        width: 343px;
        display: block;
        margin: 20px auto;
    }
    .signInMsgPhoneBox{
        padding: 24px 80px;
    }
    .signInMsgPhoneBox p{
        color: white;
        display: block;
    }
    .signInMsgPhoneTitle{
        font-size: 16px;

    }
    .signInMsgPhoneName{
        font-size: 32px;
        font-weight: bold;

    }
    .erBox{
        position: relative;
        width: 218px;
        height: 218px;
        margin: 30px auto 0 auto;
        background: rgba(255,255,255,.6);

    }
    .erBox img{
        position: absolute;
        width: 200px;
        display: block;
        height: 200px;
        left: 50%;
        top:50%;
        margin-left: -100px;
        margin-top: -100px;


    }

    .recruiting-word-am{
        animation:word_am 0.5s ease-in-out 1s 1 normal;
        -webkit-animation: word_am 0.5s ease-in-out 1s 1 normal ;
        -ms-animation: word_am 0.5s ease-in-out 1s 1 normal ;
        -ms-animation-fill-mode:both;
        -webkit-animation-fill-mode:both;
         animation-fill-mode:both;
    }
    @-webkit-keyframes word_am{
        0%{
            top:-60px;
            opacity:0;
        }
        70%{
            top:30px;
            opacity:1;
        }
        80%{
            top:30px;
            opacity:1;
            -webkit-transform:rotate(12deg);
            -ms-transform:rotate(12deg);
            transform:rotate(12deg);
        }
        90%{
            top:30px;
            opacity:1;
            -webkit-transform:rotate(-30deg);
            -ms-transform:rotate(-30deg);
            transform:rotate(-30deg);
        }
        100%{
            top:15px;
            opacity:1;
            -webkit-transform:rotate(0deg);
            -ms-transform:rotate(0deg);
            transform:rotate(0deg);
        }
    }
      @keyframes word_am {
          0%{
              top:-60px;
              opacity:0;
          }
          70%{
              top:30px;
              opacity:1;
          }
          80%{
              top:30px;
              opacity:1;
              -webkit-transform:rotate(12deg);
              transform:rotate(12deg);
          }
          90%{
              top:30px;
              opacity:1;
              -webkit-transform:rotate(-30deg);
              transform:rotate(-30deg);
          }
          100%{
              top:15px;
              opacity:1;
              -webkit-transform:rotate(0deg);
              transform:rotate(0deg);
          }
      }
      .conmit{
          position: relative;
          width: 279px;
          height: 44px;
          background: #FFD363;
          color: black;
          line-height: 44px;
          margin: 0 auto;
          border-radius: 2px;
          text-align: center;
          font-size: 18px;
      }
      .conmit-disable{
          color:#808080;
          background:#DEDEDE ;
      }

      .signInBtn{
          position: relative;
          width: 91.5%;
          display: block;
          margin: 48px auto;

      }
      /*按钮动画*/
      .s-animated {
          animation:signIn-scale .8s ease-in-out 0.2s infinite alternate;
          -webkit-animation: signIn-scale .8s ease-in-out 0.2s infinite alternate ;
          -ms-animation: signIn-scale .8s ease-in-out 0.2s infinite alternate ;
          -webkit-animation-fill-mode:both;
          animation-fill-mode:both;
          -ms-animation-fill-mode:both;
      }

      @-webkit-keyframes signIn-scale {
          0% {
              -webkit-transform: scale(0.965);
              -ms-transform: scale(0.965);
              transform: scale(0.965);
          }
          50% {
              -webkit-transform: scale(1);
              -ms-transform: scale(1);
              transform: scale(1);
          }
          100% {
              -webkit-transform: scale(0.965);
              -ms-transform: scale(0.965);
              transform: scale(0.965);

          }
      }
      @keyframes signIn-scale {
          0% {
              -webkit-transform: scale(0.965);
              -ms-transform: scale(0.965);
              transform: scale(0.965);
          }
          50% {
              -webkit-transform: scale(1);
              -ms-transform: scale(1);
              transform: scale(1);
          }
          100% {
              -webkit-transform: scale(0.965);
              -ms-transform: scale(0.965);
              transform: scale(0.965);

          }
      }
      .signIn-scale {
          -webkit-animation-name: signIn-scale;
          animation-name: signIn-scale
      }
    .personCur{
        color: #243A60!important;
        background: #FFD363!important;

    }

    .person{
        font-size: 16px;
        color: #666666;
        height: 40px;
        line-height: 40px;
        background: #EDEDED;
        flex: 1;
    }
     .radio{
         display: none;

     }
      .radio-name{
          display: inline-block;
          width:16px;
          height:16px;
          border:1px solid #cccccc;
          border-radius:100%;
          margin-right:10px;
          vertical-align: middle;

      }
      .radio:checked + .radio-name:after{
          content:"";
          display: inline-block;
          width:16px;
          height:16px;
          background:#FFD363;
          border-radius:100%;

      }
      .radio:checked + .radio-name{
          border:1px solid #FFD363;

      }

    .progressBox{
        position: relative;
        width: 91.5%;
        background-color: transparent;
        margin: 120px auto 160px auto;
    }
    .progress-tips{
        position: relative;
        display: flex;
        width: 100%;
        height: 8px;
        border-top:1px solid #607392;
        justify-content:center;
    }
      .progress-top-tips{
          position: relative;
          display: flex;
          width: 100%;
          height: 8px;
          justify-content:center;
      }
      .progress-top-tip-cell{
          height: 8px;
          flex: .25;
      }
      .progress-tip-cell{
          border-left:1px solid #A4B8D9;
          height: 4px;
          flex: .25;
      }
      .tip-word{
          width: 103px;
          text-align: left;
          color: #243A60;
          font-size: 10px;
          background: #FFD363;
          border-radius: 4px;
          padding: 4px;
          left: 35px;
          top: 48px;
          position: absolute;
      }
      .tip-word2{
          width: 103px;
          text-align: left;
          color: #243A60;
          font-size: 10px;
          background: #FFD363;
          border-radius: 4px;
          padding: 4px;
          right: 0px;
          top: 48px;
          position: absolute;
      }
      .tip-word3{
          width: 103px;
          text-align: left;
          color: #243A60;
          font-size: 10px;
          background: #FFD363;
          border-radius: 4px;
          padding: 4px;
          left: 50%;
          margin-left: -51px;
          top: -75px;
          position: absolute;
      }


      .tips-count{
          color: #A4B8D9;
          font-size: 10px;
          position: relative;
          margin-top: 4px;
          margin-left: -83px;
          text-align: center;
      }
      .tips-count-end{
          color: #A4B8D9;
          font-size: 10px;
          position: absolute;
          top: 4px;
          right: 0;
          text-align: center;
      }
      .tip-line{
          height: 24px;
          position: relative;
          top: 0px;
          border-right: 1px #E8C772 solid;
      }
      .tip-top-line{
          height: 24px;
          position: relative;
          top: -18px;
          border-right: 1px #E8C772 solid;

      }
    .recruiting-top{
        position: absolute;
        width: 100%;
        bottom: -1px;
    }
      .recruiting-bottom{
          position: relative;
          width: 100%;
      }
      .yd-progressbar>svg{
          /*border-radius: 8px;*/
      }



    .dialog-title{
        position: relative;
        color:#C18F24;
        font-size: 24px;
        text-align: center;
        margin-bottom: 30px;
    }
    .dialog-cell{
        display: flex;
        padding: 10px 14px 5px 24px;
        margin-bottom: 15px;
        align-items: center;
    }
   .dialog-cell-border{
       position: relative;
          border-bottom: 1px solid #ededed;
          padding-bottom: 10px;
      }
    .dialog-name{
        position: relative;
        width: 18px;
        height: 18px;
        text-align: left;
        margin-right: 16px;
        margin-bottom: 10px;
    }
    .telphone{
        border: none;
        width: 249px;
        height: 30px;
        color: #1a1a1a;
        font-size: 18px;
        /*border-bottom: 1px solid #e6e6e6;*/
    }

    .area-name{
        width: 249px;
        height: 30px;
        color: #243A60;
        font-size: 18px;
        text-align: left;
    }
    .areaselect{
        position: relative;
        font-size: 14px;
        padding-left: 8px;
        height: 38px;
        width: 249px;
        margin-left: 38px;
        margin-bottom: 30px;
        background:#f5f5f5 url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center ;

    }
   .recruiting-warp .code-btn{

        color: #1a1a1a;
        position: absolute;
        right: 0px;
        padding: 8px;
        background: #FFD363;
        border-radius: 2px;
        top: 0px;
        /*margin-top: -31px;*/
    }
    .code-btn-disable{
        color:#999999;
        background: #DEDEDE;

    }

      .info_dialog_container{
          position: fixed;
          z-index: 1000;
          top: 0;
          right: 0;
          left: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.6);
      }


    /*打电话弹窗遮罩*/
    /*.wx-mask{*/
       /**/
    /*}*/
    .info_wx-dialog{
        position: fixed;
        z-index: 5000;
        width: 90%;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        background-color: #FFFFFF;
        text-align: center;
        border-radius: 4px;
        overflow: hidden;
        padding: 25px 0 30px 0;

    }

  /*动画*/
    .animated {
        -webkit-animation-duration: .3s;
        animation-duration: .3s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }
    .animated.infinite {
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
    }
    .animated.hinge {
        -webkit-animation-duration: .6s;
        animation-duration: .6s;
    }
    /*the animation definition*/
    @-webkit-keyframes zoomIn {
        0% {
            opacity: 0;
            -webkit-transform: scale3d(.3, .3, .3);
            transform: scale3d(.3, .3, .3)
        }
        50% {
            opacity: 1
        }
    }
    @keyframes zoomIn {
        0% {
            opacity: 0;
            -webkit-transform: scale3d(.3, .3, .3);
            -ms-transform: scale3d(.3, .3, .3);
            transform: scale3d(.3, .3, .3)
        }
        50% {
            opacity: 1
        }
    }
    .zoomIn {
        -webkit-animation-name: zoomIn;
        animation-name: zoomIn
    }



</style>
